<template>
  <div class="departments">
    <el-card>
      <div class="main">
        <div class="tree-top">
          <div class="name">传智教育</div>
          <div class="manger">负责人</div>
          <div class="other">
            <el-dropdown>
              <span>
                <span>操作</span>
                <i class="el-icon-arrow-down" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click.native="addClick('')"
                  >添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <el-divider />
      <el-tree :data="list">
        <template v-slot="{ data }">
          <div class="main">
            <div class="tree-top">
              <div class="name">{{ data.name }}</div>
              <div class="manger">{{ data.manager }}</div>
              <div class="other">
                <el-dropdown>
                  <span>
                    <span>操作</span>
                    <i class="el-icon-arrow-down" />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        @click.native="addClick(data.id)"
                      >添加子部门</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="delClick(data)"
                      >删除子部门</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="editEvebt(data)"
                      >编辑子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </template>
        <!-- 新增弹框组件 -->
      </el-tree>
    </el-card>
    <add ref="add" :treelist="treelist" @getlist="getlist" />
  </div>
</template>

<script>
import add from '../components/add.vue'
import { CompanyDepartment, companyDepartmentDelete } from '@/api/departments'

export default {
  components: {
    add
  },
  data() {
    return {
      list: [],
      treelist: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const { data: res } = await CompanyDepartment()
      this.treelist = res.depts

      this.list = this.treeList(res.depts, '')
    },
    // tree 转换
    treeList(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.treeList(arr, item.id)
          return true
        }
      })
    },
    // 新增点击
    addClick(id) {
      this.$refs.add.show = true
      this.$refs.add.form.pid = id
      this.$refs.add.mode = 'add'
    },
    // 删除点击
    delClick(data) {
      this.$confirm(`您确定删除该项(${data.name})吗`, '提示')
        .then(async() => {
          await companyDepartmentDelete(data.id)
          this.$message.success('删除成功')
          this.getlist()
        })
        .catch(() => {})
    },
    // 编辑 点击
    editEvebt(data) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = { ...data }
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  width: 90%;
  margin: 80px 0 0 50px;
  .main {
    width: 100%;
    margin: 30px auto;
  }
  .tree-top {
    display: flex;
    align-items: center;
    .name {
      flex: 1;
    }
    .manger {
      width: 150px;
    }
  }
}
</style>
